<template>
  <view>
    <navbar type="second" title="添加我的"></navbar>
    <u-empty v-if="invitationList.length==0" marginTop="200upx" mode="list"
      icon="http://cdn.uviewui.com/uview/empty/list.png">
    </u-empty>
    <view class="container">
      <u-list height="auto">
        <u-list-item v-for="(item, index) in invitationList" :key="index">
          <u-cell>
            <view slot="title" class="u-slot-title" style="display: flex; align-items: center">
              <u--image :showLoading="true" :src="item.avatar" width="32px" height="32px"></u--image>
              <view style="display: flex; flex-direction: column;">
                <text class="u-cell-text" size="18" style="margin-left: 20upx;">{{ item.nickname }}</text>
                <text class="u-cell-text" size="14" style="margin: 10upx 0 0 20upx; font-size: 12px;color: #909399">
                  申请日期:{{ $moment(item.updateTime).format("YYYY-MM-DD") }}
                </text>
              </view>
            </view>

            <view slot="value" class="u-slot-value">
              <u-button v-if="item.status == 0" text="待处理" type="success" @click="deal(item)"></u-button>
              <u--text v-if="item.status == 1" text="已同意" color="#000"></u--text>
              <u--text v-if="item.status == 2" suffixIcon="question-circle-fill" text="已拒绝"></u--text>
            </view>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
    <u-modal :asyncClose="true" title="同意/拒绝" :show="modalShow" closeOnClickOverlay showCancelButton
      @close="() => modalShow = false">
      <view class="slot-content">
        <u--form labelPosition="left">
          <u-form-item label="备注">
            <u--text type="warning" :text="invitation.remark?invitation.remark:'对方啥也没写,就是想加你'"></u--text>
          </u-form-item>
          <u-form-item label="理由" borderBottom>
            <u--input v-model="invitation.reason"></u--input>
          </u-form-item>
        </u--form>
      </view>
      <view slot="confirmButton" style="display: flex; justify-content: space-between">
        <u-button text="通过" type="success" shape="circle" @click="handel(1)" style="margin-right: 50upx"></u-button>
        <u-button text="拒绝" type="error" shape="circle" @click="handel(2)"></u-button>
      </view>

    </u-modal>
  </view>
</template>

<script>
  import {
    mapGetters
  } from "vuex"

  export default {
    data() {
      return {
        // 模态框展示
        modalShow: false,
        // 邀请列表
        invitationList: [],
        // 理由
        reason: '',
        // 好友Id
        friendId: '',
        // 备注
        remark: '',
        // 邀请对象
        invitation: {}
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    onLoad() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.loadInvitation()
      },
      // 加载邀请数据
      async loadInvitation() {
        let userId = this.userInfo.id
        const param = {
          friend_id: userId
        }
        const result = await this.$api.invitationList(param)
        if (result.code !== 200) {
          this.$tips.error(result.msg)
          return
        }
        this.invitationList = result.data.data
      },
      // 处理
      deal(item) {
        this.modalShow = true
        this.invitation = item
      },
      // 执行事件
      async handel(status) {
        this.$tips.loading()
        const param = {
          id: this.invitation.friendId,
          user_id: this.userInfo.id,
          reason: this.invitation.reason,
          status: status,
        }
        const result = await this.$api.handleInvitation(param)
        if (result.code == 201) {
          this.$tips.error(result.msg)
          this.modalShow = false
          this.loadInvitation()
          return
        }
        uni.$u.toast("操作成功")
        this.$Router.push('/pages/index/index')
        this.modalShow = false

      }
    }
  }
</script>

<style lang="scss">
  .list {

    &__item {
      @include flex;
      padding: 6px 12px;
      align-items: center;

      &__avatar {
        height: 35px;
        width: 35px;
        border-radius: 3px;
      }

      &__user-name {
        font-size: 16px;
        margin-left: 10px;
        color: $u-main-color;
      }
    }

    &__footer {
      color: $u-tips-color;
      font-size: 14px;
      text-align: center;
      margin: 15px 0;
    }
  }
</style>
